<div class="example-menu-container">
  <h3>Examples</h3>

  <div class="example-menu-container">
    <h4>Inline Menu</h4>
    <cdk-menu-inline-example></cdk-menu-inline-example>
  </div>

  <div class="example-menu-container">
    <h4>Standalone Menu</h4>
    <cdk-menu-standalone-menu-example></cdk-menu-standalone-menu-example>
  </div>

  <div class="example-menu-container">
    <h4>Standalone Stateful Menu</h4>
    <cdk-menu-standalone-stateful-menu-example></cdk-menu-standalone-stateful-menu-example>
  </div>

  <div class="example-menu-container">
    <h4>Menu Bar</h4>
    <cdk-menu-menubar-example></cdk-menu-menubar-example>
  </div>

  <div class="example-menu-container">
    <h4>Context Menu</h4>
    <cdk-menu-context-example></cdk-menu-context-example>
  </div>

  <div class="example-menu-container">
    <h4>Nested Context Menu</h4>
    <cdk-menu-nested-context-example></cdk-menu-nested-context-example>
  </div>
</div>

<div class="example-menu-container">
  <h3>MenuBar Example</h3>

  <div cdkTargetMenuAim cdkMenuBar>
    <button id="file_button" cdkMenuItem [cdkMenuTriggerFor]="file">File</button>
    <button id="edit_button" cdkMenuItem [cdkMenuTriggerFor]="edit">Edit</button>
  </div>

  <ng-template #file>
    <div cdkMenu cdkTargetMenuAim class="example-menu" id="file_menu">
      <button id="share_button" cdkMenuItem [cdkMenuTriggerFor]="share">Share</button>
      <button id="open_button" cdkMenuItem>Open</button>
      <button id="rename_button" cdkMenuItem>Rename</button>
      <button id="print_button" cdkMenuItem>Print</button>
    </div>
  </ng-template>

  <ng-template #edit>
    <div cdkMenu class="example-menu" id="edit_menu">
      <button id="undo_button" cdkMenuItem>Undo</button>
      <button id="redo_button" cdkMenuItem>Redo</button>
      <button id="cut_button" cdkMenuItem>Cut</button>
      <button id="copy_button" cdkMenuItem>Copy</button>
      <button id="paste_button" cdkMenuItem>Paste</button>
    </div>
  </ng-template>
  <ng-template #share>
    <div cdkMenu class="example-menu" id="share_menu">
      <button id="gvc_button" cdkMenuItem>GVC</button>
      <button id="gmail_button" cdkMenuItem>Gmail</button>
      <button id="twitter_button" cdkMenuItem>Twitter</button>
    </div>
  </ng-template>
</div>

<div class="example-menu-container">
  <h3>Inline Menu Example</h3>

  <div cdkMenu class="example-menu" class="example-menu-inline">
    <button cdkMenuItem [cdkMenuTriggerFor]="file">Inbox</button>
    <button cdkMenuItem>Starred</button>
    <button cdkMenuItem>Snoozed</button>
    <button cdkMenuItem>Important</button>
    <button cdkMenuItem>Chats</button>
    <button cdkMenuItem>Sent</button>
  </div>
</div>

<div class="example-menu-container">
  <h3>Standalone Menu Example</h3>

  <p><button [cdkMenuTriggerFor]="someMenu">Standalone Menu</button></p>
</div>

<div class="example-menu-container">
  <h3>Custom Menu Position Example</h3>
  <p>The menu and context menu below should open centered on the trigger</p>

  <p><button [cdkMenuTriggerFor]="someMenu" [cdkMenuPosition]="customPosition">Some Menu</button></p>

  <div class="example-context" [cdkContextMenuTriggerFor]="outer" [cdkContextMenuPosition]="customPosition">
    <h4>Custom Context Menu Position (Centered on Cursor)</h4>

    Lucas ipsum dolor sit amet maul jade jawa ben wookiee binks lando jinn baba tatooine. Jade biggs
    padmé sebulba cade dagobah. Baba lars mothma yoda. Bothan calrissian c-3p0 maul fisto lando
    obi-wan. Skywalker solo darth bothan droid obi-wan ahsoka. Maul solo obi-wan calrissian antilles
    yavin chewbacca lando. Mustafar ponda kit jango. C-3p0 skywalker baba grievous moff. Hutt ben
    darth solo skywalker bothan skywalker maul organa. Grievous cade antilles utapau skywalker
    grievous antilles chewbacca.
  </div>

  <ng-template #someMenu>
    <div cdkMenu class="example-menu">
      <button cdkMenuItem>Some Option 1</button>
      <button cdkMenuItem [cdkMenuTriggerFor]="someSubMenu">Some Option 2 ></button>
      <button cdkMenuItem>Some Option 3</button>
      <button cdkMenuItem>Some Option 4</button>
    </div>
  </ng-template>

  <ng-template #someSubMenu>
    <div cdkMenu class="example-menu">
      <button cdkMenuItem>Some Option 1</button>
      <button cdkMenuItem>Some Option 2</button>
      <button cdkMenuItem>Some Option 3</button>
      <button cdkMenuItem>Some Option 4</button>
    </div>
  </ng-template>

  <ng-template #outer>
    <div cdkMenu class="example-menu" id="outer_menu">
      <button cdkMenuItem>Undo</button>
      <button cdkMenuItem>Redo</button>
    </div>
  </ng-template>

  <ng-template #inner>
    <div cdkMenu class="example-menu" id="inner_menu">
      <button cdkMenuItem>Cut</button>
      <button cdkMenuItem>Copy</button>
      <button cdkMenuItem>Paste</button>
    </div>
  </ng-template>
</div>

<div class="example-menu-container">
  <h3>Radio items</h3>
  <button [cdkMenuTriggerFor]="sizeMenu">Size menu (items directly in menu)</button>
  <button [cdkMenuTriggerFor]="colorMenu">Color menu (items in menu group)</button>
  <button [cdkMenuTriggerFor]="sizeAndColorMenu">Size & Color menu (items in directly in menu & in menu group)</button>

  <ng-template #sizeMenu>
    <div class="example-menu" cdkMenu>
      @for (size of sizes; track size) {
        <button
          cdkMenuItemRadio
          [cdkMenuItemChecked]="selectedSize === size"
          (cdkMenuItemTriggered)="selectedSize = size">{{size}}</button>
      }
    </div>
  </ng-template>

  <ng-template #colorMenu>
    <div class="example-menu" cdkMenu>
      <div cdkMenuGroup>
        @for (color of colors; track color) {
          <button
            cdkMenuItemRadio
            [cdkMenuItemChecked]="selectedColor === color"
            (cdkMenuItemTriggered)="selectedColor = color">{{color}}</button>
        }
      </div>
    </div>
  </ng-template>

  <ng-template #sizeAndColorMenu>
    <div class="example-menu" cdkMenu>
      @for (size of sizes; track size) {
        <button
          cdkMenuItemRadio
          [cdkMenuItemChecked]="selectedSize === size"
          (cdkMenuItemTriggered)="selectedSize = size">{{size}}</button>
      }
      <hr />
      <div cdkMenuGroup>
        @for (color of colors; track color) {
          <button
            cdkMenuItemRadio
            [cdkMenuItemChecked]="selectedColor === color"
            (cdkMenuItemTriggered)="selectedColor = color">{{color}}</button>
        }
      </div>
    </div>
  </ng-template>
</div>
